<template>
  <div class="container">
    <div class="userForm">
      <el-form ref="userForm" :model="userForm" :rules="userFormRules" label-width="120px">
        <el-form-item :label="$t('users.name')" prop="name">
          <el-input v-model="userForm.name"></el-input>
        </el-form-item>
        <el-form-item :label="$t('users.account')" prop="account">
          <el-input v-model="userForm.account"></el-input>
        </el-form-item>
        <el-form-item :label="$t('users.password')" prop="password">
          <el-input v-model="userForm.password" show-password></el-input>
        </el-form-item>
        <el-form-item :label="$t('task.country')" prop="country_code">
          <el-select v-model="userForm.country_code" multiple :placeholder="$t('task.placeholder')">
            <el-option v-for="(item,index) in countryCodeList" :key="index" :value="item.value" :label="item.label"/>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('users.role')" prop="role" v-if="role==1">
          <el-radio-group v-model="userForm.role">
            <el-radio :label="0">普通用户</el-radio>
            <el-radio :label="1">代理用户</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('users.phone')">
          <el-input v-model="userForm.phone"></el-input>
        </el-form-item>
        <el-form-item :label="$t('users.email')">
          <el-input v-model="userForm.email"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="loading" @click="onSubmit">{{ $t('route.create') }}</el-button>
          <el-button>{{ $t('permission.cancel') }}</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import {create} from '@/api/user'
import {getUserCountryCode} from '@/api/task'
import {mapGetters} from "vuex";

export default {
  inject: ['reload'],
  data() {
    return {
      userForm: {
        name: '',
        account: '',
        password: '',
        phone: '',
        email: '',
        role: 0,
        country_code: []
      },
      userFormRules: {
        name: [{required: true, message: this.$t('message.required')}],
        country_code: [{required: true, message: this.$t('message.required')}],
        password: [{required: true, message: this.$t('message.required')}],
        account: [{required: true, message: this.$t('message.required')}],
        role: [{required: true, message: this.$t('message.required')}]
      },
      countryCodeList: [],
      loading: false
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'avatar',
      'account',
      'number',
      'useNumber',
      'role'
    ])
  },
  created() {
    this.getUserCountryCodeList()
  },
  methods: {
    getUserCountryCodeList() {
      getUserCountryCode({
        type: 1
      }).then(response => {
        this.countryCodeList = response.data
      })
    },
    onSubmit() {
      this.$refs.userForm.validate(valid => {
        if (!valid) {
          return false
        }
        this.loading = true
        create({
          name: this.userForm.name,
          account: this.userForm.account,
          password: this.userForm.password,
          email: this.userForm.email,
          phone: this.userForm.phone,
          role: this.userForm.role,
          country_code: this.userForm.country_code
        }).then(res => {
          this.$confirm('Create successful！', 'title', {
            confirmButtonText: 'confirm',
            showCancelButton: false,
            type: 'success'
          }).then(() => {
            this.reload()
          })
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
      })
    }
  }
}
</script>
<style scoped>
.container {
  position: relative;
  padding: 1.5rem
}

.userForm {
  width: 900px;
  background-color: #ffffff;
  padding: 3rem;
}
</style>
